<!--suppress HtmlUnknownTag -->
<script setup>
import LightCard from "@/components/LightCard.vue";
import Weather from "@/components/Weather.vue";
import {computed, onMounted, reactive, ref, watch} from "vue";
import {ArrowRightBold, CircleCheck, EditPen, Star} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import TopicEditor from "@/components/TopicEditor.vue";
import {useStore} from "@/store";
import ColorDot from "@/components/ColorDot.vue";
import router from "@/router";
import TopicTag from "@/components/TopicTag.vue";
import TopicCollectList from "@/components/TopicCollectList.vue";
import {getForumTopicList, getForumTopTopics} from "@/api/forum";
import {getWeather} from "@/api/other";

const store = useStore()
const weather = reactive({
    location: {},
    now: {},
    hourly: [],
    success: false,
})
const topics = reactive({
    list: [],
    type: 0,
    page: 0,
    end: false,
    top: []
})
const collects = ref(false)
const editor = ref(false)
const today = computed(() => {
    const date = new Date();
    return `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`;
})

watch(() => topics.type, () => resetList(), {immediate: true})


function updateList() {
    if (topics.end) return;
    getForumTopicList(topics.page, topics.type, data => {
        if (data) {
            data.forEach(d => topics.list.push(d))
            topics.page++
        }
        if (!data || data.length < 5)
            topics.end = true
    })
}

function onTopicCreate() {
    editor.value = false
    resetList()
}

function resetList() {
    topics.page = 0
    topics.end = false
    topics.list = []
    updateList()
}

navigator.geolocation.getCurrentPosition(
        (position) => {
            const longitude = parseFloat((position.coords.longitude).toFixed(2));
            const latitude = parseFloat((position.coords.latitude).toFixed(2));
            console.log(`经度: ${longitude}, 纬度: ${latitude}`);
            getWeather(longitude, latitude, (data) => {
                Object.assign(weather, data);
                weather.success = true;
            });
        },
        (error) => {
            console.info(error);
            ElMessage.warning('位置获取超时');
            getWeather(116.41, 39.92, (data) => {
                Object.assign(weather, data);
                weather.success = true;
            });
        },
        {
            timeout: 2000,
        }
);


onMounted(() => {
    getForumTopTopics(data => topics.top = data)
})
</script>

<template>
    <div style="display: flex;margin: 20px auto;gap: 20px;max-width: 1080px;padding: 0 20px">
        <div style="flex: 1">
            <light-card>
                <div class="create-topic" @click="editor = true">
                    <el-icon>
                        <EditPen/>
                    </el-icon>
                    发表主题...
                </div>
            </light-card>
            <light-card style="margin-top: 10px; display: flex;gap: 8px">
                <div :class="`type-select-card ${topics.type === item.id ? 'active' : ''}`"
                     v-for="item in store.forum.types"
                     @click="topics.type = item.id"
                >
                    <color-dot :color="item.color"/>
                    <span style="margin-left: 5px;">{{ item.name }}</span>
                </div>
            </light-card>
            <light-card style="margin-top: 10px;display: flex;flex-direction: column;gap: 10px" v-if="topics.top.length">
                <div v-for="item in topics.top" class="top-topic"
                     @click="router.push(`/index/topic-detail/${item.id}`)">
                    <el-tag type="info" size="small">置顶</el-tag>
                    <div>{{ item.title }}</div>
                    <div>{{ new Date(item.time).toLocaleString() }}</div>
                </div>
            </light-card>
            <transition name="el-fade-in" mode="out-in">
                <div v-if="topics.list.length">
                    <div style="margin-top: 10px;display: flex; flex-direction: column;gap: 10px"
                         v-infinite-scroll="updateList">
                        <light-card v-for="item in topics.list"
                                    class="topic-card"
                                    @click="router.push('/index/topic-detail/' + item.id)"
                        >
                            <div style="display: flex">
                                <div style="margin: 0; padding: 0;">
                                    <el-avatar :size="30" :src="store.avatarUserUrl(item.avatar)"/>
                                </div>
                                <div style="margin-left: 8px;">
                                    <div style="font-size: 13px; font-weight: bold;">{{ item.username }}</div>
                                    <div style="font-size: 12px; color: grey">{{new Date(item.time).toLocaleString() }}</div>
                                </div>
                            </div>
                            <div>
                                <span style="font-weight: bold;font-size: 18px;margin-right: 8px;">{{item.title }}</span>
                                <topic-tag :type="item.type"/>
                            </div>
                            <div class="topic-content">{{ item.text }}</div>
                            <div style="display: grid; grid-template-columns: repeat(3, 1fr);grid-gap: 10px">
                                <el-image class="topic-image" v-for="img in item.images" :key="img.id" :src="img"
                                          fit="cover"/>
                            </div>
                            <div style="display: flex;gap: 20px;font-size: 13px;margin-top: 10px;opacity: 0.8">
                                <div>
                                    <el-icon style="vertical-align:middle;">
                                        <CircleCheck/>
                                    </el-icon>
                                    {{ item.like }}点赞
                                </div>
                                <div>
                                    <el-icon style="vertical-align:middle;">
                                        <Star/>
                                    </el-icon>
                                    {{ item.collect }}收藏
                                </div>
                            </div>
                        </light-card>
                    </div>
                </div>
            </transition>
        </div>
        <div style="width: 280px">
            <div style="position: sticky; top: 20px">
                <light-card>
                    <div class="collect-list-button" @click="collects = true">
                        <span>查看我的收藏</span>
                        <el-icon style="transform: translateY(3px)">
                            <ArrowRightBold/>
                        </el-icon>
                    </div>
                </light-card>
                <light-card style="margin-top: 10px;">
                    <div style="font-weight: bold; text-align: center; font-size: 20px">
                        公告
                    </div>
                    <el-divider style="margin: 10px 0"/>
                    <div style="font-size: 14px; margin: 10px; color: grey">
                        认真贯彻党的方针政策，推动事业高质量发展
                        党的方针政策是我们各项工作的行动指南和根本遵循。
                        认真贯彻党的方针政策，对于推动事业高质量发展具有至关重要的意义。
                    </div>
                </light-card>
                <light-card style="margin-top: 10px;">
                    <div style="font-weight: bold">
                        天气信息
                    </div>
                    <el-divider style="margin: 10px 0"/>
                    <weather :data="weather"/>
                </light-card>
                <light-card style="margin-top: 10px">
                    <div class="info-text">
                        <div>当前日期</div>
                        <div>{{ today }}</div>
                    </div>
                    <div class="info-text">
                        <div>当前IP地址</div>
                        <div>localhost</div>
                    </div>
                </light-card>
                <div style="font-size: 13px; margin-top: 10px; color: grey">
                    友情链接
                    <el-divider style="margin: 10px 0;"/>
                </div>
                <div style="display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 10px;margin-top: 10px;">
                    <div class="friend-link">
                        <el-image style="height: 100%" src="https://element-plus.org/images/CRMEB-l.png"/>
                    </div>
                    <div class="friend-link">
                        <el-image style="height: 100%" src="https://element-plus.org/images/mele-banner.png"/>
                    </div>
                    <div class="friend-link">
                        <el-image style="height: 100%" src="https://element-plus.org/images/vform-banner.png"/>
                    </div>
                    <div class="friend-link">
                        <el-image style="height: 100%" src="https://element-plus.org/images/jnpfsoft.png"/>
                    </div>
                </div>
            </div>
        </div>
        <topic-editor :show="editor" @success="onTopicCreate" @close="editor = false"/>
        <topic-collect-list :show="collects" @close="collects = false"/>
    </div>
</template>

<style lang="less" scoped>
.collect-list-button {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    transition: .3s;

    &:hover {
        cursor: pointer;
        opacity: 0.6;
    }
}

.top-topic {
    display: flex;

    div:first-of-type {
        font-size: 13px;
        margin-left: 10px;
        font-weight: bold;
        opacity: 0.7;
        transition: color .3s;

        &:hover {
            color: grey;
        }
    }

    div:nth-of-type(2) {
        flex: 1;
        color: grey;
        font-size: 13px;
        text-align: right;
    }

    &:hover {
        cursor: pointer;
    }
}

.type-select-card {
    background: #f5f5f5f5;
    padding: 1px 8px;
    font-size: 13px;
    border-radius: 3px;
    box-sizing: border-box;
    transition: background-color .3s;

    &.active {
        border: solid 1px #afa49b;
    }

    &:hover {
        cursor: pointer;
        background-color: #dadada;
    }
}

.topic-card {
    padding: 16px;
    transition: scale .3s;

    &:hover {
        scale: 1.01;
        cursor: pointer;
    }

    .topic-content {
        font-size: 15px;
        color: grey;
        margin: 5px 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .topic-image {
        width: 100%;
        height: 100%;
        max-height: 110px;
        border-radius: 5px;
    }
}

.info-text {
    display: flex;
    justify-content: space-between;
    color: grey;
    font-size: 14px;
}

.friend-link {
    border-radius: 5px;
    overflow: hidden;
}

.create-topic {
    background-color: #efefef;
    border-radius: 5px;
    height: 40px;
    color: grey;
    font-size: 14px;
    line-height: 40px;
    padding: 0 10px;

    &:hover {
        cursor: pointer;
    }
}

.dark {
    .create-topic {
        background-color: #1e1e1e;
    }

    .type-select-card {
        background-color: #282828;

        &.active {
            border: solid 1px #64594b;
        }

        &:hover {
            cursor: pointer;
            background-color: #5e5e5e;
        }
    }
}
</style>